<template>
  <div class="rank">
    <div class="rank-title"> 产品销量排行Top10 </div>
    <div class="rank-box">
      <!-- <div class="my-balls">
        <span
          class="ball"
          v-for="(ball, index) in randomArr"
          :key="index"
          :style="{ left: `${ball.left}px`, top: `${ball.top}px`, fontSize: ball.fontSize + 'px' }"
          >{{ ball.left }}-{{ ball.top }}</span
        >
      </div> -->
      <div class="com-rank" ref="rank_ref"></div>
    </div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import 'echarts-wordcloud'
const allData = ref([]) // 服务器返回的数据
const rank_ref = ref(null)
const rankInstance = ref(null)
function screenAdapter() {
  rankInstance.value.resize()
}

const randomArr = ref([])

function createdBalls() {
  let count = 10
  const showHeight = 158 //限制钻石生成区域高度
  const showWidth = 394 - 40
  while (count > 0) {
    const row = Math.floor(Math.random() * showHeight)
    const col = Math.floor(Math.random() * showWidth)
    if (randomArr.value.length === 0) {
      randomArr.value.push({
        left: col,
        top: row
      })
      count -= 1
    } else {
      const noOverlap = randomArr.value.every((v) => Math.hypot(v.left - col, v.top - row) > 60) //这里的主要目的就是来保证每次随机生成的点确定的图片位置不会有重叠
      if (noOverlap) {
        randomArr.value.push({
          left: col,
          top: row
        })
        count -= 1
      }
    }
  }
}
const initOption = ref({})
// 初始化rankInstance
function initChart() {
  const words = [
    {
      name: '超出十个字符不显1',
      value: 84
    },
    {
      name: '超出十个字符不显1',
      value: 5
    },
    {
      name: '超出十个字符不显1',
      value: 22
    },
    {
      name: '超出十个字符不显1',
      value: 11
    },
    {
      name: '超出十个字符不显1',
      value: 101
    },
    {
      name: '超出十个字符不显1',
      value: 33
    },
    {
      name: '超出十个字符不显1',
      value: 77
    },
    {
      name: '超出十个字符不显1',
      value: 98
    },

    {
      name: '超出十个字符不显1',
      value: 66
    },
    {
      name: '超出十个字符不显1',
      value: 55
    },
    {
      name: '超出十个字符不显1',
      value: 44
    }
  ]
  rankInstance.value = echarts.init(rank_ref.value, 'chalk')
  const colorList = ['#50FFED', '#056AB5', '#49B2FF', '#FF9F1B']
  initOption.value = {
    tooltip: {
      show: true
    },
    series: [
      {
        //用来调整词之间的距离
        gridSize: 10,
        //用来调整字的大小范围
        sizeRange: [8, 15],
        //用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向
        rotationRange: [0, 0],
        type: 'wordCloud',
        size: ['95%', '95%'],
        textRotation: [0, 90],
        textPadding: 0,
        autoSize: {
          enable: true,
          minSize: 14
        },
        itemStyle: {
          normal: {
            color: function () {
              let index = Math.floor(Math.random() * colorList.length)
              // console.log('colorList[index]', colorList[index])
              return colorList[index]
            }
          }
        },
        data: words
      }
    ]
  }
  // {
  //   tooltip: {
  //     confine: true,
  //     show: true,
  //     trigger: 'item',
  //     textStyle: {
  //       align: 'left'
  //     },
  //     className: 'custom-tooltip-box',
  //     formatter: function (params) {
  //       return ''
  //     }
  //   },
  //   series: [
  //     {
  //       type: 'graph',
  //       layout: 'force',
  //       roam: false,
  //       force: {
  //         repulsion: 50, // 如果感觉图标之间离得近，把这里调大
  //         edgeLength: [10, 30],
  //         layoutAnimation: false
  //       },
  //       label: {
  //         show: true,
  //         formatter: (data) => [`{value|${data.value}}`].join(''),
  //         color: '#fff',
  //         rich: {
  //           value: {
  //             fontSize: 24,
  //             align: 'center',
  //             color: '#fff',
  //             fontWeight: 600
  //           }
  //         }
  //       },
  //       data: allData.value.map((item, index) => ({
  //         id: item.id,
  //         name: item.name,
  //         value: item.malfunctionNum,
  //         // 图标图片，使用%，不管设置了几个img，都能保证每个图标都有图片
  //         // symbol: imgList[index % imgList.length],
  //         showSymbol: false,
  //         symbolSize: 0,
  //         // 图标大小
  //         label: {
  //           rich: {
  //             value: {
  //               // 字体大小根据malfunctionNum动态变化，和图标大小一样，有最大最小值，最大1 * 30，最小0.5 *30
  //               // 如果需要改最大最小值的话，改里面的0.5或30都可以
  //               fontSize: item.malfunctionNum,
  //               color: item.color
  //             }
  //           }
  //         }
  //       }))
  //     }
  //   ]
  // }
  // 对图标初始化配置的控制
  console.log('initOption.value', initOption.value)
  rankInstance.value.setOption(initOption.value)
}
// 更新图表
function updateChart(data) {
  const dataOption = {
    xAxis: {
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260]
      }
    ]
  }
  rankInstance.value.setOption(dataOption)
}

onUnmounted(() => {
  // 组件销毁的时候取消监听器
  window.removeEventListener('resize', screenAdapter)
})
onMounted(() => {
  initChart()
  // updateChart()
  window.addEventListener('resize', screenAdapter)
})
</script>

<style lang="scss" scoped>
// .my-balls {
//   position: relative;
//   width: 399px;
//   height: 164px;
//   background: rgba(92, 137, 237, 0.16);
//   border-radius: 0px 0px 0px 0px;
//   border: 3px solid rgba(126, 166, 255, 0.38);
//   position: relative;
//   display: flex;
//   justify-content: center;
//   align-items: center;
// }
// .ball {
//   position: absolute;
// }
.com-rank {
  width: 400px;
  height: 164px;
}
.rank {
  margin-top: 31px;
  position: relative;
  width: 400px;
  border-radius: 0px 0px 0px 0px;
  // width: 30vw;
  .rank-title {
    padding-left: 51px;
    width: 332px;
    height: 38px;
    color: #fff;
    font-family: 'HarmonyOS Sans SC';
    font-size: 20px;
    font-weight: bold;
    line-height: 38px; /* 92.308% */
    background-image: url('../../assets/images/title-l-bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-bottom: 38px;
  }
}
.rank-box {
  width: 399px;
  height: 164px;
  background: rgba(92, 137, 237, 0.16);
  border-radius: 0px 0px 0px 0px;
  border: 3px solid rgba(126, 166, 255, 0.38);
}
</style>
